<!DOCTYPE html>
<html>
  <head>
    <title>使用WebRTC访问摄像头并拍照</title>
    <style type="text/css">
      #videoElement,
      #canvasElement {
        display: block;
        margin: 10px auto;
        border: 1px solid black;
        position: absolute;
        bottom: -300px;
      }
      #captureButton {
        display: block;
        margin: 10px auto;
        padding: 10px 20px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>使用WebRTC访问摄像头并拍照</h1>

    <video id="videoElement" autoplay playsinline></video>
    用户名:
    <input type="text" name="username" id="username" />
    <canvas id="canvasElement" width="600" height="550"></canvas>

    <button id="captureButton">拍照</button>

    <script
      type="text/javascript"
      src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"
    ></script>
    <script type="text/javascript">
      // 获取按钮元素
      const captureButton = document.getElementById('captureButton')

      // 获取video和canvas元素
      const videoElement = document.getElementById('videoElement')
      const canvasElement = document.getElementById('canvasElement')

      // 检查浏览器是否支持getUserMedia方法
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // 请求访问摄像头
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then(function (stream) {
            // 将视频流绑定到video元素
            videoElement.srcObject = stream
          })
          .catch(function (error) {
            console.log('访问摄像头出错: ', error)
          })
      } else {
        console.log('浏览器不支持访问摄像头')
      }

      // 监听拍照按钮的点击事件
      captureButton.addEventListener('click', function () {
        var username = $('#username').val()
        // 将视频画面绘制到canvas上
        const context = canvasElement.getContext('2d')
        context.drawImage(
          videoElement,
          0,
          0,
          canvasElement.width,
          canvasElement.height,
        )

        // 获取canvas的图片数据
        const imageData = canvasElement.toDataURL('image/png')
        var faceBase = imageData.split(',')[1]
        console.log(faceBase)
        // 创建一个 <a> 元素用于下载
        // const downloadLink = document.createElement('a');
        // downloadLink.href = imageData;
        // downloadLink.download = 'myImage.png';
        // // 将 <a> 元素添加到文档中
        // document.body.appendChild(downloadLink);
        // // 模拟点击下载链接以开始下载
        // downloadLink.click();
        // // 在完成下载后,移除 <a> 元素
        // document.body.removeChild(downloadLink);
        $.ajax({
          url: 'http://localhost:6060/PersonFace/findpersonface',
          type: 'post',
          data: {
            b: faceBase.toString(),
          },
          headers: {
            'Content-Type': 'application/json',
          },
          success: function (result) {
            if (result === '1') {
              alert('注册成功!!,点击确认跳转至登录页面')
              // window.location.href="fac2.html";
            } else if (result === '2') {
              alert('您已经注册过啦!!')
            } else {
              alert('系统错误!!')
            }
          },
        })
      })
    </script>
  </body>
</html>
